<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Layui</title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<link rel="stylesheet" href="./layui/css/layui.css">
		<script type="text/javascript" src="js/global.js"></script>
		<script src="./layui/layui.js"></script>
		<link rel="stylesheet" href="./layui/css/layui.css" />
		<link rel="stylesheet" href="./ayq/modules/formDesigner.css" />
		<link rel="stylesheet" href="./ayq/modules/cron.css" />
		<link rel="stylesheet" href="./ayq/modules/labelGeneration.css" />
		<link rel="stylesheet" href="./ayq/modules/formPreview.css" />
		<script type="text/javascript" src="./ayq/modules/Sortable/Sortable.js"> </script>
		<script type="text/javascript" src="./ayq/modules/iceEditor/iceEditor.js"></script>
	</head>
	<body>
		<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
			<legend>基本演示</legend>
		</fieldset>
		<div>
			<button type="button" class="layui-btn" id="importJson">导入数据</button>
			<button type="button" class="layui-btn layui-btn-danger" id="globalDisable">禁用表单</button>
			<button type="button" class="layui-btn layui-btn-normal" id="globalNoDisable">启用表单</button>
			<button type="button" class="layui-btn layui-btn-warm" id="getFormData">获取表单数据</button>
		</div>

		<div class="layui-row">
			<div class="layui-col-md3" style="margin-top: 100px;">
				<!-- 一级树 -->
				<div id="demoleft" class="demo-tree-more"  style="margin: 20px 20px;padding: 20px 20px;border: 1px solid #009688;"></div>
			</div>
			<div class="layui-col-md9">
				<!-- 表单表格 -->
				<div id="demoright" style="margin: 20px 20px;padding: 20px 20px;border: 1px solid #009688;"></div>
			</div>

		</div>





		<script>
		 var demojs = [];
			layui.config({
				base: './ayq/modules/' /* 修改为你module文件夹地址*/
			}).use(['tree', 'util', 'jquery', 'form', 'formPreview', 'layer', 'upload'], function() {
				var tree = layui.tree,
					layer = layui.layer,
					$ = layui.$,
					form = layui.form,
					util = layui.util,
					upload = layui.upload,
					index = layui.index,
					formPreview = layui.formPreview;
					
					$('.previewForm').on('click', function() {
						window.localStorage.setItem('layui_form_json', JSON.stringify(options.data));
						layer.confirm('请选择你要预览页面的方式？', {
							btn: ['弹窗', '新页面'] //按钮
						}, function() {
							//iframe窗
							layer.open({
								type: 2,
								title: '表单预览',
								btn: ['关闭'], //可以无限个按钮
								btn1: function(index, layero) {
									layer.close(index);
								},
								closeBtn: 1, //不显示关闭按钮
								shade: [0],
								area: ['100%', '100%'],
								offset: 'auto', //右下角弹出
								anim: 2,
								content: ['./preview.html', 'yes'], //iframe的url，no代表不显示滚动条
								end: function() { //此处用于演示
									//加载结束
								}
							});
						}, function() {
							window.open("./preview.html");
						});
					
					});
				//导入数据
				$('#importJson').on('click', function() {
					layer.open({
						type: 1,
						title: 'JSON模板数据导入',
						id: 'Lay_layer_importjsoncodeview',
						content: $('.importjsoncodeview'),
						area: ['800px', '640px'],
						shade: false,
						resize: false,
						success: function(layero, index) {},
						end: function() {
							$('.importjsoncodeview').css("display", "none")
						}
					});
				});


				//模拟数据
				$.ajax({
					type: "post",
					url: globalData.server + "process/getAllProcess",
					dataType: "json",
					success: function(data) {
						/* 	for (var i = 0; i < data.length; i++) {
								console.log(i)
							} */
						/* 	datas = [{
								title: data[0].formtitle,
								id: 1,
								field: 'name1'
							}] */

						//基本演示
						tree.render({
							elem: '#demoleft',
							data: data,
							id: 'demoId1',
							click: function(obj) {

								//console.log("我是表单数据："+obj.data.content);
								console.log("我是表单id：" + obj.data.id);

								$.ajax({
									url: globalData.server + "process/getFormById" +
										"?" + obj.data.id, // 提交到controller的url路径
									type: "post", // 提交方式
									data: {
										"id": obj.data.id
									}, // data为String类型，必须为 Key/Value 格式。
									dataType: "json", // 服务器端返回的数据类型

									success: function(data) {
										//console.log(obj.data.content)
										var s = obj.data.content;
										console.log(obj.data.content)
										//layer.open("preview.html")
										content: ['./preview.html',
										'yes']; //iframe的url，no代表不显示滚动条
										$("form").remove(); //移除当前表单，避免追加
										$("#demoright").append($(obj.data.content));
										form.render();

									},
								});
							}

						});
					},
					error: function(jqXHR) {
						alert("发生错误：" + jqXHR.status);
					}
				});


				/* 
								//基本演示
								tree.render({
									elem: '#test12',
									data: data,
									showCheckbox: false //是否显示复选框
										,
									id: 'demoId1',
									isJump: true //是否允许点击节点时弹出新窗口跳转
										,
									click: function(obj) {
										var data = obj.data; //获取当前点击的节点数据
										layer.msg('状态：' + obj.state + '<br>节点数据：' + JSON.stringify(data));
									}
								}); */


			});
		</script>

	</body>
</html>
